<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import dayjs from 'dayjs';
  import { ref, onMounted } from 'vue';
  import useTable from '@/hooks/table';
  import { User, UserSearchParams } from '@/types/user';
  import { getUserList } from '@/api/user';
  import UserCard from '@/components/user-card/index.vue';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import UserEditor from '@/views/users/list/user-editor.vue';
  import SearchForm from './search-form.vue';

  const router = useRouter();

  const { pager, loading, total, list } = useTable<User>();

  const defaultParams = ref<UserSearchParams>({
    valid: 1,
    userType: 0,
  });
  const searchParams = ref<UserSearchParams>({});

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getUserList({
        ...pager.value,
        ...searchParams.value,
        unReal: searchParams.value.includeUnreal === 1 ? null : 0,
        ...defaultParams.value,
      });
      total.value = res?.data?.data?.total || 0;
      list.value = res?.data?.data?.list || [];
    } finally {
      loading.value = false;
    }
  };

  const handleSearch = (params: UserSearchParams) => {
    pager.value.pageIndex = 1;
    searchParams.value = params;
    getData();
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    getData();
  };

  onMounted(() => {
    getData();
  });

  const goToDetail = (user: User) => {
    const routeInfo = router.resolve({
      name: 'UserDetailApp',
      query: {
        id: user.id,
      },
    });
    window.open(routeInfo.href);
  };

  const userEditorConfig = ref<User | null>(null);
  const handleUserEditDone = (refresh: boolean) => {
    userEditorConfig.value = null;
    if (refresh) {
      getData();
    }
  };
</script>

<template>
  <div style="padding: 20px">
    <a-row :gutter="[20, 20]">
      <a-col>
        <a-card title="全部用户" :bordered="false">
          <SearchForm @submit="handleSearch" />
        </a-card>
      </a-col>

      <a-col>
        <a-card :bordered="false">
          <a-table
            :bordered="{ cell: true }"
            :data="list"
            :loading="loading"
            :pagination="{
              total,
              current: pager.pageIndex,
              pageSize: pager.pageSize,
              showTotal: true,
              showJumper: true,
            }"
            @page-change="handlePageIndexChanged"
          >
            <template #columns>
              <a-table-column
                title="用户"
                data-index="name"
                fixed="left"
                :width="300"
              >
                <template #cell="{ record }">
                  <UserCard :user-info="record" />
                </template>
              </a-table-column>
              <a-table-column title="年纪" data-index="ageType" :width="100">
                <template #cell="{ record }">
                  {{ record.ageType === 1 ? '青少年' : '成人' }}
                </template>
              </a-table-column>
              <a-table-column title="手机号" data-index="phone" :width="150" />
              <a-table-column
                title="出生日期"
                data-index="birthday"
                :width="150"
              >
                <template #cell="{ record }">
                  {{
                    record.birthday
                      ? dayjs(record.birthday).format('YYYY/MM/DD')
                      : '-'
                  }}
                </template>
              </a-table-column>
              <a-table-column title="认证信息" :width="200">
                <template #cell="{ record }">
                  <div>{{ record.idType }}</div>
                  <div>{{ record.idNo }}</div>
                </template>
              </a-table-column>
              <a-table-column title="地区" data-index="phone" :width="200">
                <template #cell="{ record }">
                  {{
                    ProvinceJSON.find((i) => i.id === record.province)?.name
                  }}/{{
                    CityJSON[record.province as keyof typeof CityJSON]?.find(
                      (i) => i.id === record.city
                    )?.name
                  }}
                </template>
              </a-table-column>
              <a-table-column
                title="注册时间"
                data-index="gmtCreate"
                :width="180"
              >
                <template #cell="{ record }">
                  {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="120" align="center">
                <template #cell="{ record }">
                  <a-link @click="goToDetail(record)">查看</a-link>
                  <a-link @click="userEditorConfig = record">编辑</a-link>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>

    <UserEditor
      v-if="userEditorConfig"
      :user="userEditorConfig"
      @close="handleUserEditDone"
    />
  </div>
</template>
